<template>
  <view @click.stop="handleClick">
    <slot></slot>
  </view>
  <nut-popup position="bottom" closeable round :custom-style="{ padding: '30px 0' }" v-model:visible="showModal">
    <div p-36rpx pb-10rpx>
      <div font-bold>取消订单</div>
      <div my-40rpx>
        <nut-radio-group direction="horizontal" v-model="cancelReason">
          <nut-radio
            v-for="(item, index) in cancelReasonList"
            :key="index"
            shape="button"
            :label="item.reason"
            size="large">
            {{ item.reason }}
          </nut-radio>
        </nut-radio-group>
      </div>
      <div pt-40rpx>
        <nut-button block type="primary" @click="submit" :loading="loading">提交</nut-button>
      </div>
    </div>
  </nut-popup>
</template>

<script setup lang="ts">
import { cancelTicketGoodsOrder } from '@/api/ticketGoods'
import { getClearReason } from '@/api/after-sale'
const props = defineProps<{
  orderId: string
}>()
const cancelReason = ref<any>('')
const cancelReasonList = ref<any>([])
const showModal = ref<boolean>(false)
const loading = ref<boolean>(false)
const emit = defineEmits(['refresh'])
const submit = () => {
  if (!cancelReason.value) {
    uni.showToast({
      title: '请选择取消原因',
      icon: 'none'
    })
    return
  }
  loading.value = true
  cancelTicketGoodsOrder({
    orderId: props.orderId,
    cancelReason: cancelReason.value
  })
    .then((res) => {
      emit('refresh')
      uni.showToast({
        title: '操作成功',
        icon: 'none'
      })
    })
    .finally(() => {
      showModal.value = false
      loading.value = false
    })
}
function handleClick() {
  init()
  showModal.value = true
}
async function init() {
  const res = await getClearReason('CANCEL')
  cancelReasonList.value = res.data.result
}
onMounted(() => {})
</script>

<style scoped lang="scss"></style>
<style>
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
</style>
